import React, { useEffect, useState } from 'react';
import Button from '../Button';
import Input from '../Input';
import Select from 'react-select';
import '@fortawesome/fontawesome-free/css/all.min.css';
import axios from 'axios'
import { useNavigate } from 'react-router-dom';
import LoadingScreen from '../../../Loading';
export default function Edit({formData,setFormData,setActiveTab ,id}) {
   
      const[countries,setCountries]=useState([])
      const[state,setState]=useState([])
const navigate=useNavigate()
   const[copy,setCopy]=useState(false)
    const[loaidng,setLoading]=useState(false)
    const fetchCountry = async () => {
        try {
          const response = await axios.get(
            'https://mybackend-l7om.onrender.com/api/countries',
            {
              headers: {
                Authorization: `Bearer ${localStorage.getItem("token")}`,
              }
            }
          );
        const newcountry=response.data.data.filter(country=> country.status==="active").map((country)=>(
          {
                label:country.countryName,
                value:country.countryName
            }
        ))
    
        setCountries(newcountry)
        } catch (err) {
          console.log(err.message);
        } 
      };
      const fetchState = async () => {
        try {
          const response = await axios.get(
            'https://mybackend-l7om.onrender.com/api/states',
            {
              headers: {
                Authorization: `Bearer ${localStorage.getItem("token")}`,
              }
            }
          );
        //   setSale(response.data.data)
        console.log(response.data)
        const newcountry=response.data.data.filter(country=> country.status==="active").map((country)=>(
          {
                label:country.stateName,
                value:country.stateName
            }
        ))
        console.log(newcountry)
        setState(newcountry)
        } catch (err) {
          console.log(err.message);
        } 
      };
      
      useEffect(()=>{
        fetchCountry();
        fetchState();
      },[])
     


    
//Function to handle input changes
    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData({ ...formData, [name]:(e.target.type=="Number")? Number(value):value });
    };
//Function to handle change in select inputs
    const handleSelectChange = (name,category) => (selectedOption) => {
        setFormData((prev)=>({ ...prev, [category]:{...prev[category],[name]:selectedOption.value,} }));
    };
    const handleAddress = (e,category) =>  {
        const{name,value}=e.target
        // console.log(category)
        setFormData((prev)=>({ ...prev, [category]:{...prev[category],[name]:value,} }));
    };
    
//Function to handle file input changes
    const handleFileChange = (e) => {
        setFormData({ ...formData, attachmentPath: e.target.files[0].name });
    };
//Function to handle chackbox changes
const handleCheckboxChange = () => {
    setCopy((prevCopy) => {
      const newCopy = !prevCopy;
  
      setFormData((prevData) => ({
        ...prevData,
        shippingAddress: newCopy
          ? {
              city: prevData.address?.city || "",
              locationLink: prevData.address?.locationLink || "",
              postcode: prevData.address?.postcode || "",
              state: prevData.address?.state || "",
              area: prevData.address?.area || "",
            }
          : { city: "", locationLink: "", postcode: "", state: "", area: "" },
      }));
  
      return newCopy;
    });
  };


    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(formData)
        setActiveTab('Advanced')
        
        // Here you can send formData to your API
    };

    const handleReset=()=>{
        setFormData({
            address:{
                city:"",state:"",postcode:"",locationLink:"",area:"",country:""
              },
              attachmentPath: "",
              creditLimit: 0,
              customerImage:"",
              customerName: '',
              customerId:'',
              email: '',
              gstNumber: '',
              mobile: '',
              openingBalancePayments:[],
               panNumber:"",
               phone:"",
               previousDue:0,
               priceLevel:0,
               priceLevelType:"",
               salesReturnDue:0,
               shippingAddress:{
                 area:"",
                 city:"",
                 locationLink:"",
                 postcode:"",
                 state:""
               },
               taxNumber:""
        })
    }

    return (
        <div className="p-6 mx-auto bg-white b">
            <form onSubmit={handleSubmit} onReset={handleReset}>
                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <Input
                        label="Customer Name"
                        name="customerName"
                        value={formData.customerName}
                        onChange={handleChange}
                        className='block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-2 focus:border-blue-600'
                        label_class='block text-sm font-medium text-gray-700'
                        div_class='flex flex-col'
                    />
                    <Input
                        label="Mobile"
                        name="mobile"
                        value={formData.mobile}
                        onChange={handleChange}
                        className='block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-2 focus:border-blue-600'
                        label_class='block text-sm font-medium text-gray-700'
                        div_class='flex flex-col'
                    />
                    <Input
                        label="Email"
                        name="email"
                        value={formData.email}
                        onChange={handleChange}
                        className='block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-2 focus:border-blue-600'
                        label_class='block text-sm font-medium text-gray-700'
                        div_class='flex flex-col'
                    />
                    <Input
                        label="Phone"
                        name="phone"
                        value={formData.phone}
                        onChange={handleChange}
                        className='block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-2 focus:border-blue-600'
                        label_class='block text-sm font-medium text-gray-700'
                        div_class='flex flex-col'
                    />
                    <Input
                        label="GST Number"
                        name="gstNumber"
                        value={formData.gstNumber}
                        onChange={handleChange}
                        className='block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-2 focus:border-blue-600'
                        label_class='block text-sm font-medium text-gray-700'
                        div_class='flex flex-col'
                    />
                    <Input
                        label="TAX Number"
                        name="taxNumber"
                        value={formData.taxNumber}
                        onChange={handleChange}
                        className='block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-2 focus:border-blue-600'
                        label_class='block text-sm font-medium text-gray-700'
                        div_class='flex flex-col'
                    />
                    <Input
                        label="Credit Limit"
                        name="creditLimit"
                        value={formData.creditLimit}
                        onChange={handleChange}
                        className='block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-2 focus:border-blue-600'
                        label_class='block text-sm font-medium text-gray-700'
                        div_class='flex flex-col'
                        type='Number'
                        min='0'
                    />
                    <Input
                    type="number"
                        label="Previous Due"
                        name="previousDue"
                        value={formData.previousDue}
                        onChange={handleChange}
                        className='block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-2 focus:border-blue-600'
                        label_class='block text-sm font-medium text-gray-700'
                        div_class='flex flex-col'
                        
                        min='0'
                    />
                    <div>
                        <Input
                            type="file"
                            label="Attachment"
                            onChange={handleFileChange}
                            className='w-full p-2 mt-1 text-gray-700 bg-gray-200 border rounded-md shadow-sm cursor-pointer hover:bg-gray-300'
                            label_class='block text-sm font-medium text-gray-700'
                        />
                        <p className="text-xs text-red-500">Size: 2MB</p>
                        {/* <Button className="mt-2 bg-green-500 text-white px-2 py-2 font-bold text-[10px]  cursor-pointer hover:bg-green-600 rounded-md" text="Click to view" /> */}
                    </div>
                </div>
                <div className="mt-6">
                    <div className="flex items-center mb-2">
                        <i className="mr-2 text-green-500 fas fa-map-marker-alt"></i>
                        <span className="font-semibold text-green-500">ADDRESS DETAILS</span>
                    </div>
                    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                        <div className='flex flex-col -z-1'>
                            <label htmlFor="country" className="block text-sm font-medium text-gray-700">Country</label>
                            <Select
                                options={countries}
                           value={countries.find(option => option.value === formData?.address?.country) || null}
                                onChange={handleSelectChange('country','address')}
                                className='-z-1'
                                menuPortalTarget={document.body}
                                styles={{ menuPortal: base => ({ ...base, zIndex: 1 }) }}
                            />
                        </div>
                        <div className='flex flex-col'>
                            <label htmlFor="state" className="block text-sm font-medium text-gray-700">State</label>
                            <Select
                                options={state}
                                    value={state.find(option => option.value === formData?.address?.state) || null}
                                onChange={handleSelectChange('state','address')}
                            />
                        </div>
                        <Input
                            label="City"
                            name="city"
                              onChange={(e)=>handleAddress(e,'address')}
                             value={formData.address?.city ||""}
                            className='block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-2 focus:border-blue-600'
                            label_class='block text-sm font-medium text-gray-700'
                            div_class='flex flex-col'
                        />
                        <Input
                            label="Postcode"
                            name="postcode"
                            value={formData.address?.postcode ||""}
                            onChange={(e)=>handleAddress(e,'address')}
                            className='block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-2 focus:border-blue-600'
                            label_class='block text-sm font-medium text-gray-700'
                            div_class='flex flex-col'
                        />
                        <Input
                            label="Location Link"
                            name="locationLink"
                            value={formData.address?.locationLink ||""}
                            onChange={(e)=>handleAddress(e,'address')}
                            className='block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-2 focus:border-blue-600'
                            label_class='block text-sm font-medium text-gray-700'
                            div_class='flex flex-col'
                        />
                        <div className='flex flex-col'>
                            <label htmlFor="address" className="block text-sm font-medium text-gray-700">Address</label>
                            <textarea
                                id="address"
                                name="area"
                                value={formData.address?.area||""}
                                onChange={(e)=>handleAddress(e,'address')}
                                className="block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-2 focus:border-blue-600"
                            ></textarea>
                        </div>
                    </div>
                </div>
                <div className="py-4 mx-auto bg-white">
                    <div className='flex items-center gap-2 mb-4'>
                        <i className="text-green-500 fas fa-truck"></i>
                        <h2 className="text-lg font-semibold text-green-500">SHIPPING ADDRESS</h2>
                    </div>
                    <div className="mb-4">
                        <label className="inline-flex items-center">
                            <input
                                type="checkbox"
                                className="w-5 h-5 text-green-500 form-checkbox"
                                
                                onChange={()=>handleCheckboxChange(copy)}
                            />
                            <span className="ml-2 text-gray-700">Copy Address?</span>
                        </label>
                    </div>
                    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                        <div>
                            <label className="block text-gray-700">Country</label>
                            <Select
                                options={countries}
    value={countries.find(option => option.value === formData?.address?.country) || null}
                            />
                        </div>
                        <div>
                            <label className="block text-gray-700">State</label>
                            <Select
    options={state}
    value={state.find(option => option.value === formData?.shippingAddress?.state) || null}
    onChange={handleSelectChange('state', 'shippingAddress')}
/>

                        </div>
                        <Input
                            label="Postcode"
                            name="postcode"
                            value={formData.shippingAddress?.postcode||""}
                            onChange={(e)=>handleAddress(e,'shippingAddress')}
                            className='block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-2 focus:border-blue-600'
                            label_class='block text-gray-700'
                        />
                        <Input
                            label="City"
                            name="city"
                            value={formData.shippingAddress?.city||""}
                            onChange={(e)=>handleAddress(e,'shippingAddress')}
                            className='block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-2 focus:border-blue-600'
                            label_class='block text-gray-700'
                        />
                        <Input
                            label="Location Link"
                            name="locationLink"
                            value={formData.shippingAddress?.locationLink||""}
                            onChange={(e)=>handleAddress(e,'shippingAddress')}
                            className='block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-2 focus:border-blue-600'
                            label_class='block text-gray-700'
                        />
                        <div>
                            <label className="block text-gray-700">Address</label>
                            <textarea
                                name="area"
                                value={formData.shippingAddress?.area||""}
                                onChange={(e)=>handleAddress(e,'shippingAddress')}
                                className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-2 focus:border-blue-600"
                            ></textarea>
                        </div>
                    </div>
                </div>
                <div className="flex flex-col justify-center gap-2 mt-6 mb-2 md:flex-row md:gap-5">
                         <Button className="px-20 py-2 text-white bg-green-500 rounded hover:bg-green-600" type='submit' text="Next" />
                         <Button className="px-20 py-2 text-white bg-orange-500 rounded hover:bg-orange-600" text="Close" type='reset' />
                </div>
            </form>
            <div className="w-full overflow-hidden bg-white border-t-4 rounded-lg shadow-md border-t-blue-600">
                <div className="px-6 py-4 border-b border-gray-200">
                    <h2 className="text-xl font-semibold text-blue-600">Opening Balance Payments</h2>
                </div>
                <div className="overflow-x-auto">
                    <table className="min-w-full bg-white border-separate">
                        <thead>
                            <tr className="w-full text-sm leading-normal text-gray-600 uppercase bg-gray-200">
                                <th className="px-6 py-3 text-left">#</th>
                                <th className="px-6 py-3 text-left">Payment Date</th>
                                <th className="px-6 py-3 text-left">Payment</th>
                                <th className="px-6 py-3 text-left">Payment Type</th>
                                <th className="px-6 py-3 text-left">Payment Note</th>
                                <th className="px-6 py-3 text-left">Action</th>
                            </tr>
                        </thead>
                        <tbody className="text-sm font-light text-gray-600">
                            <tr>
                                <td colSpan="6" className="px-6 py-3 text-center">No Previous Stock Entry Found!!</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
}